<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <!--表格头部-->
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="人员姓名">
                    <el-input placeholder="请输入人员信息" v-model="queryParams.userName"></el-input>
                </el-form-item>
                <el-form-item label="拼音首字母">
                    <el-input placeholder="请输入拼音首字母" v-model="queryParams.pinName"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="selectSubmit">查询</el-button>
                </el-form-item>
                <el-button
                    class="filter-item"
                    style="margin-left: 20px;"
                    type="success"
                    icon="el-icon-edit"
                    @click="dialogStatus= 'create';dialogVisible = true;resetForm('ruleForm');"
                >添加</el-button>
            </el-form>
            <el-table :data="tableData" highlight-current-row style="width: 100%">
                <el-table-column prop="id" label="编号" fixed></el-table-column>
                <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
                <el-table-column prop="pinName" label="简写" width="90"></el-table-column>
                <el-table-column prop="deptName" label="部门编号" sortable width="120"></el-table-column>
                <!--<el-table-column prop="dept_name" label="部门" width="90"></el-table-column>-->
                <el-table-column prop="accountType" label="账号类型" width="120"></el-table-column>
                <el-table-column prop="tel" label="手机号" width="140">
                    <template slot-scope="scope">{{scope.row.tel}}</template>
                </el-table-column>
                <el-table-column prop="postName" label="职务" width="90"></el-table-column>
                <el-table-column prop="sex" label="性别" width="90"></el-table-column>
                <el-table-column prop="incumbency" label="状态" width="90"></el-table-column>
                <el-table-column prop="wages" label="工资" sortable width="90"></el-table-column>
                <el-table-column prop="entryDate" label="入职日期" width="120"></el-table-column>
                <el-table-column prop="quitDate" label="离职日期" width="120"></el-table-column>
                <el-table-column prop="correctionDate" label="转正日期" width="120"></el-table-column>
                <el-table-column prop="headImg" label="转正日期" width="120"></el-table-column>
                <el-table-column prop="birthdate" label="生日" width="120"></el-table-column>
                <el-table-column prop="idCard" label="身份证号码" width="140"></el-table-column>
                <el-table-column prop="urgentTel" label="紧急联系方式" width="140"></el-table-column>
                <el-table-column prop="urgentName" label="紧急联系人" width="140"></el-table-column>
                <el-table-column prop="otherTel" label="其他联系方式" width="140"></el-table-column>
                <el-table-column prop="idCardAddr" label="证件地址" width="120"></el-table-column>
                <el-table-column prop="liveAddr" label="居住地址" width="120"></el-table-column>
                <el-table-column prop="bankCard" label="银行卡号" width="120"></el-table-column>
                <el-table-column prop="openingBank" label="开户行" width="120"></el-table-column>
                <el-table-column prop="openingName" label="开户名" width="120"></el-table-column>
                <el-table-column prop="remark" label="备注" width="120"></el-table-column>
                <el-table-column prop="stat" label="是否有效" width="120"></el-table-column>
                <el-table-column prop="idCardImgPositive" label="身份证正面" width="140"></el-table-column>
                <el-table-column prop="idCardImgBack" label="身份证反面" width="140"></el-table-column>
                <el-table-column prop="postName" label="是否有效" width="120"></el-table-column>
                <el-table-column prop="healthCertificateId" label="健康证编号" width="150"></el-table-column>
                <el-table-column prop="aborContractId" label="劳动合同编号" width="150"></el-table-column>
                <el-table-column prop="socialSecurityId" label="社保编号" width="150"></el-table-column>
                <el-table-column property="insertTime" sortable label="创建时间" width="150"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope" fixed="right">
                        <el-button
                            type="primary"
                            size="mini"
                            @click="handleUpdate(scope.row.id);dialogStatus= 'update';dialogVisible=true"
                        >编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--添加数据-->
            <el-dialog
                :visible.sync="dialogVisible"
                title="添加员工信息"
                :close-on-click-modal="false"
                width="50%"
            >
                <el-form
                    ref="userFormRef"
                    :model="addUserInfo"
                    :rules="formUserRules"
                    label-width="100px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="用户名" ::prop="userName">
                        <el-input v-model="addUserInfo.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="拼音首字母" :prop="pinName">
                        <el-input v-model="addUserInfo.pinName" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :prop="password">
                        <el-input v-model="addUserInfo.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" :prop="deptId">
                        <el-input v-model="addUserInfo.deptId"></el-input>
                    </el-form-item>
                    <el-form-item label="账号类型" :prop="accountType" placeholder="请选择">
                        <el-select v-model="addUserInfo.accountType">
                            <el-option
                                v-for="item in type_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号" :prop="tel">
                        <el-input v-model.number="addUserInfo.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="职务" :prop="postId">
                        <el-input v-model="addUserInfo.postId"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :prop="sex" placeholder="请选择" >
                        <el-select v-model="addUserInfo.sex">
                            <el-option
                                v-for="item in sex_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>

                    </el-form-item>


                    <el-form-item label="状态" :prop="incumbency">
                        <el-select v-model="addUserInfo.incumbency" placeholder="请选择">
                            <el-option
                                v-for="item in sta_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工资" :prop="wages">
                        <el-input v-model="addUserInfo.wages"></el-input>
                    </el-form-item>
                    <el-form-item label="入职日期" :prop="entryDate">
                        <el-date-picker
                            v-model="addUserInfo.entryDate"
                            type="date"
                            placeholder="选择日期时间"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="离职日期"  :prop="quitDate">
                        <el-date-picker
                            v-model="addUserInfo.quitDate"
                            type="date"
                            placeholder="选择日期时间"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="转正日期" :prop="correctionDate">
                        <el-date-picker
                            v-model="addUserInfo.correctionDate"
                            type="date"
                            placeholder="选择日期时间"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="生日"  :prop="birthdate">
                        <el-date-picker v-model="addUserInfo.birthdate" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="身份证号码" :prop="idCard">
                        <el-input v-model="addUserInfo.idCard"></el-input>
                    </el-form-item>

                    <el-form-item label="紧急联系人"  :prop="urgentName">
                        <el-input v-model="addUserInfo.urgentName"></el-input>
                    </el-form-item>
                    <el-form-item label="紧急联系电话"  :prop="urgentTel">
                        <el-input v-model="addUserInfo.urgentTel"></el-input>
                    </el-form-item>
                    <el-form-item label="其他联系方式" :prop="otherTel">
                        <el-input v-model="addUserInfo.otherTel"></el-input>
                    </el-form-item>
                    <el-form-item label="证件地址" :prop="idCardAddr">
                        <el-input v-model="addUserInfo.idCardAddr"></el-input>
                    </el-form-item>
                    <el-form-item label="居住地址"  :prop="liveAddr">
                        <el-input v-model="addUserInfo.liveAddr"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡号"  :prop="bankCard">
                        <el-input v-model="addUserInfo.bankCard"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行" :prop="openingBank">
                        <el-input v-model="addUserInfo.openingBank"></el-input>
                    </el-form-item>
                    <el-form-item label="开户名" :prop="openingName">
                        <el-input v-model="addUserInfo.openingName"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" :prop="remark">
                        <el-input v-model="addUserInfo.remark"  maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="其他联系方式" :prop="otherPhone">
                        <el-input v-model="addUserInfo.otherPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="健康证编号" :prop="healthCertificateId">
                        <el-input v-model="addUserInfo.healthCertificateId"></el-input>
                    </el-form-item>
                    <el-form-item label="劳动合同编号" :prop="aborContractId">
                        <el-input v-model="addUserInfo.aborContractId"></el-input>
                    </el-form-item>
                    <el-form-item label="社保编号"  :prop="socialSecurityId">
                        <el-input v-model="addUserInfo.socialSecurityId"></el-input>
                    </el-form-item>
                    <el-form-item class="button_submit">
                        <el-button type="primary" @click="submitForm('addUserInfo')">立即添加</el-button>
                        <el-button type="info" @click="close();resetForm('userFormRef')" >取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.page"
                    :page-size="queryParams.limit"
                    layout="prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
        </div>
    </div>

</template>

<script>
    import { getUserTab, addUserInfo, deleteUser, updateUser,getUserById } from "../api/staff";
    import moment from "moment";


    export default {
        components: {},
        data() {
            return {
                // 模态框显示隐藏
                dialogVisible: false,
                id:null,
                // 表格数据
                tableData: [],
                total:0,
                // 表单数据
                addUserInfo: {
                    id: "", //人员编号
                    userName: "", //用户名
                    pinName: "", //拼音首拼
                    password:"",//密码
                    deptId: "", //部门编号
                    deptName: "", //部门名称
                    accountType: null, //账号类型
                    tel: "", //手机号
                    postId: "", //职务
                    sex: null, //性别
                    postName:"",
                    incumbency: null, //状态
                    wages: 0,
                    entryDate: null, //入职日期
                    quitDate: null, //离职日期
                    correctionDate: null, //转正日期
                    headImg: "", //头像
                    birthdate:null, //生日
                    idCard: "", //身份证号码
                    urgentTel: "", //紧急联系电话
                    urgentName: "", //紧急联系人
                    otherTel: "", //其他联系方式
                    idCardAddr: "", //证件地址
                    liveAddr: "", //居住地址
                    bankCard: "", //银行卡号
                    openingBank: "", //开户行
                    openingName: "", //开户名
                    remark: "", //备注
                    stat: "3", //是否有效
                    otherPhone: "", //其他联系方式
                    idCardImgPositive: "", //身份证正面
                    idCardImgBack: "", //身份证反面
                    healthCertificateId: "", //健康证编号
                    aborContractId: "", //劳动合同编号
                    socialSecurityId: "", //社保编号
                    insertTime: null //新增时间
                },
                // 表单验证规则
                formUserRules: {
                    id: [{ required: true, message: "请输入人员编号", trigger: "blur" }],
                    userName: [
                        { required: true, message: "请输入用户名", trigger: "blur" },
                        { min: 2, max: 20, message: '用户名长度在2到20个字符', trigger: 'change' }
                    ],
                    pinName: [
                        { required: true, message: "请输入拼音首字母", trigger: "blur" },
                        { min: 2, max: 20, message: '拼音首字母长度在2到20个字符', trigger: 'change' }
                    ],
                    deptId: [
                        { required: true, message: "请选择部门", trigger: "blur" }
                    ],
                    accountType: [
                        { required: true, message: "请选择账号类型", trigger: "blur" }
                    ],
                    tel: [
                        { required: true, message: "请输入联系电话",trigger: "blur"  },
                        { type: "number", message: "电话号码必须是数字",trigger: "blur"  }
                    ],
                    sex: [
                        { required: true, message: "请选择性别",trigger: "blur" },
                    ],
                    incumbency: [
                        { required: true, message: "请选择状态" ,trigger: "blur" },
                    ],
                    entryDate: [
                        { required: true, message: "请选择入职时间",trigger: "blur" },
                    ],
                    socialSecurityId:[
                        { required: true, message: "请输入社保编号" ,trigger: "blur" },
                    ],
                    aborContractId:[
                        { required: true, message: "请输入劳动合同",trigger: "blur"  },
                    ]

                },
                // 员工类型1-内部、2-客户、3-设备
                type_options: [
                    {
                        value:1,
                        label:  "内部"
                    },
                    {
                        value: 2 ,
                        label:"客户"
                    },
                    {
                        value:3,
                        label: "设备"
                    }
                ],
                // 员工状态1-试用、2-正式、3-辞职、4-辞退

                sta_options: [
                    {
                        value: 1,
                        label: "试用"
                    },
                    {
                        value: 2,
                        label: "正式"
                    },
                    {
                        value:3,
                        label:  "辞职"
                    },
                    {
                        value: 4,
                        label: "辞退"
                    },

                ],
                // 性别0-未知，1-男，2-女
                sex_options: [
                    {
                        value: 0,
                        label: "未知"
                    },
                    {
                        value: 1,
                        label: "男"
                    },
                    {
                        value: 2,
                        label: "女"
                    }],
                //获取表格数据条件
                queryParams: {
                    //
                    query: "",
                    userId: "",
                    page: 1,
                    limit: 10
                }
            };
        },
        created() {
            this.fetchData();
        },
        methods: {
            // 获取表格数据
            fetchData() {
                getUserTab(this.queryParams).then(res => {
                    res.data.forEach((item, index, arr) => {
                        if (item.tel != null) {
                            item.tel = item.tel.substr(0, 3) + '****' + item.tel.substr(7, item.tel.split('').length)
                        }
                        if (item.sex === '1') {
                            item.sex = '男'
                        } else if (item.sex === '2') {
                            item.sex = '女'
                        } else {
                            item.sex = '未知'
                        }
                        if (item.accountType === '2') {
                            item.accountType = '客户'
                        } else if (item.accountType === '3') {
                            item.accountType = '设备'
                        } else {
                            item.accountType = '内部'
                        }

                    })
                    this.tableData = res.data
                    this.queryParams.page = res.page
                    this.total = res.total



                });
            },
            // 改变每页显示数据
            handleSizeChange(val) {
                this.queryParams.limit = val;
                this.fetchData();
            },
            // 改变页码
            handleCurrentChange(val) {
                console.log(val);
                this.queryParams.page = val;
                this.fetchData();
            },
            //根据条件查询数据
            selectSubmit() {
                this.fetchData();
            },

            // 关闭弹窗
            close() {
                this.dialogVisible = false;
                this.$refs.userFormRef.resetFields();
            },
            // 表单提交
            submitForm() {
                this.$refs.userFormRef.validate(valid => {


                    if (valid) {

                        if (this.dialogStatus === "create") {
                            addUserInfo(this.addUserInfo).then(res => {
                                console.log(res);
                                if (res.code === 200) {
                                    this.$notify({
                                        title: "成功",
                                        type: "success",
                                        message: res.message,
                                        duration: 2000
                                    });
                                    this.dialogVisible = false;
                                    this.fetchData();
                                } else {
                                    this.$notify({
                                        title: "失败",
                                        type: "error",
                                        message: res.message,
                                        duration: 2000
                                    });
                                }
                            });
                        }
                        if (this.dialogStatus === "update") {
                            updateUser(this.addUserInfo).then(res => {
                                let title;
                                let type;
                                if (res.code === 200) {
                                    this.$notify({
                                        title: "成功",
                                        type: "success",
                                        message: res.msg,
                                        duration: 2000
                                    });
                                    this.dialogVisible = false;
                                    this.queryParams.id = null;
                                    this.fetchData();
                                } else {
                                    this.$notify({
                                        title: "失败",
                                        type: "error",
                                        message: res.msg,
                                        duration: 2000
                                    });
                                }
                            });
                        }
                    }
                });
            },

            // 获取单条员工信息
            handleUpdate(id) {

                getUserById({id:id}).then(res => {
                    if (res.code === 200) {
                        this.addUserInfo=res.data[0]
                    }
                });
            },

            // 删除用户
            deleteUser(id) {
                deleteUser({id:id}).then(res => {
                    if (res.code === 200) {
                        this.$notify({
                            title: "成功",
                            type: "success",
                            message: res.message,
                            duration: 2000
                        });
                        this.dialogVisible = false;
                        this.fetchData();
                    } else {
                        this.$notify({
                            title: "失败",
                            type: "error",
                            message: res.message,
                            duration: 2000
                        });
                    }
                });
            },
        }
    };
</script>


<style lang="less">
    @import "../style/mixin";
    .table_container {
        padding: 20px;
    }
</style>
